2-11 索引签名类型

绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型。但是有些情况，我们无法确定对象中有哪些属性（或者说对象中只有一部分属性可以确定，但是其余的属性不能确定，我们在使用的时候会添加属性），此时，就需要使用索引签名类型了。

​x
1
interface AnyObject {
2
  [key: string]: number
3
}
4
​
5
let obj: AnyObject = {
6
  a: 1,
7
  b: 2,
8
}

因为JS中对象的键是 string 类型的，所以[key:string]可以表示对象中的所有键。包括函数哦，不要忘了，对象中也可以定义函数，函数名就是key，也是string类型。

xxxxxxxxxx
12
1
​
2
interface AnyObject {
3
  [key: string]: number | (() => void)
4
}
5
​
6
let obj: AnyObject = {
7
  a: 1,
8
  b: 2,
9
  f() {
10
    console.log("1");
11
  }
12
}

在JS中，数组是一类特殊的对象，特殊的地方：数组的键（索引）是数值类型。并且，数组中可以出现任意多个元素。所以在数组对应的泛型接口中，也用到了索引签名类型。比如说下面我们自己定义一个数组类型。

xxxxxxxxxx
6
1
interface MyArray<T> {
2
  [n: number]: T
3
}
4
​
5
let arr: MyArray<number> = [1, 3, 5]
6
console.log(arr[0]);

2-12 映射类型（Mapped Types）

基本使用

作用：基于旧的类型，创建新的类型（对象类型），减少重复，提升开发效率。

核心思想是：“循环遍历原类型的所有属性，对每个属性做统一的类型转换，最终得到新类型”，就像用 “模板” 批量处理类型，避免重复写冗余代码。

核心语法：{ [P in K]: T}

在这里的in表示遍历，[P in K]遍历逻辑：P 是 “当前属性名”（占位符，可自定义），K 是 “要遍历的属性集”（通常使用 keyof 原类型来生成属性集），将遍历到的属性 P 的类型，改为 T。

in 在 TS 中的核心含义的是 “遍历” 或 “存在判断”，对应两个核心场景：

1. 映射类型中：[P in K] → 遍历 K 中的所有属性（最常用）；
2. 类型守卫中：属性 in 对象 → 判断属性是否存在，缩小类型范围。

在老师的例子中，PropKeys就是属性集。

结合keyof创建映射类型

上一个例子中，PropKeys是联合类型，但最常见的就是从一个对象类型里面获取属性集，这时候就要使用keyof来获取所有键的联合类型。

分析泛型工具类型Partial的实现

xxxxxxxxxx
12
1
// 自己实现 Partial 的功能
2
type IPartial<T> = {
3
  [key in keyof T]?: T[key]
4
}
5
​
6
type Props = {
7
  a: number;
8
  b: string;
9
  c: boolean;
10
}
11
​
12
type PartialProps = IPartial<Props>;

索引查询类型基本使用

索引查询类型，同时查询多个

可以在[]里面使用联合类型或者keyof操作符，来查询多个索引的类型。

2-13 TypeScript类型声明文件

在学习Material UI的时候，在最后一节Custumize Theme里面，新增了一些样式，但是新增的样式不在MUI定义的ts类型里面，这时候怎么解决呢？老师新增了一个src/theme.d.ts文件，在里面写了一些ts的代码，但这些代码是怎么起作用的，我是完全没有头绪。

xxxxxxxxxx
29
1
import { Theme, ThemeOptions } from '@mui/material/styles'
2
​
3
declare module '@mui/material/styles' {
4
interface Theme {
5
status: {
6
 danger: string
7
}
8
}
9
interface ThemeOptions {
10
status: {
11
 danger: React.CSSProperties['color']
12
}
13
}
14
​
15
interface Palette {
16
neutral?: PaletteColor
17
}
18
interface PaletteOptions {
19
neutral?: PaletteColorOptions
20
}
21
​
22
interface PaletteColor {
23
darker?: string
24
}
25
​
26
interface SimplePaletteColorOptions {
27
darker?: string
28
}
29
}

我的疑问就是：这种写法真的不会覆盖原来定义的ts类型吗？但是看实际的效果，我觉得是为这些interface新增了属性类型。但是怎么实现的，我心里总是没底，所以干脆学习一下，以后肯定能够用到的。

这里面用到了“声明合并”的功能，https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation这里可以参考。其实了解清楚了就非常简单，比如：

xxxxxxxxxx
11
1
// 在 node_modules/some-lib/index.d.ts 中
2
export interface Options {
3
debug: boolean;
4
}
5
​
6
// 在你自己的 xxx.d.ts 文件中
7
declare module 'some-lib' {
8
interface Options {
9
 verbose?: boolean;
10
}
11
}

➡️ TypeScript 会把你的定义与原始模块 some-lib 的定义合并。 之后 Options 类型包含 debug 与 verbose。

概述

TS中的两种文件类型

当在.d.ts文件中写可执行代码的时候，会报错：

在全局上下文中不能声明实现。

类型声明文件的使用说明

使用已有的类型声明文件

内置类型声明文件

第三方库的类型声明文件

库自带类型声明文件

由DefinitelyTyped提供

现在绝大多数库都提供自带的类型声明文件，这个地址提供的只是很少的一部分。注意：TS官方文档中提供的页面，现在已经404了。

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

创建自己的类型声明文件

在实际使用中，需要自己创建类型声明文件有两种情况：1、项目内需要共享类型；2、为已有的JS文件提供类型声明。

项目内共享类型

为已有JS文件提供类型声明

这个也分为2部分。

这个内容还是蛮重要的，我在react项目、nextjs项目、nestjs项目中，都可以新建一个index.d.ts文件，在这个文件里面写项目需要的ts类型，避免临时写类型，这样代码就不好看。如果是多个人共同协作的项目，编写类型声明文件的时候，就可以使用拆分。

🧩 一、类型声明文件为什么容易冲突

当多人维护一个大的 global.d.ts 或 types.d.ts 文件时：

• 很容易出现重复声明（比如同一个接口不同人扩展）；
• 命名空间冲突；
• 不同模块之间类型污染；
• Git merge 时产生冲突。

👉 解决思路：让类型声明模块化、可组合化。

---

📁 二、正确的拆分方式

✅ 方式 1：基于功能模块拆分

这是最推荐的方式，类似源码模块化。

xxxxxxxxxx
7
1
src/
2
├── types/
3
│   ├── user.d.ts         // 用户模块相关类型
4
│   ├── product.d.ts      // 商品模块相关类型
5
│   ├── api.d.ts          // 接口请求/响应
6
│   ├── theme.d.ts        // 样式/主题扩展（如 MUI）
7
│   └── index.d.ts        // 汇总入口

index.d.ts

xxxxxxxxxx
4
1
/// <reference path="./user.d.ts" />
2
/// <reference path="./product.d.ts" />
3
/// <reference path="./api.d.ts" />
4
/// <reference path="./theme.d.ts" />

或使用 import/export 聚合（如果是模块化声明）：

xxxxxxxxxx
4
1
// types/index.ts
2
export * from './user';
3
export * from './product';
4
export * from './api';

⚠️ 注意：如果项目用 "typeRoots" 或 "include" 指定了类型路径， 需要确保 tsconfig.json 包含这些文件。

---

✅ 方式 2：使用 declare module 拆分

如果是对第三方库（如 MUI、Express、Axios）进行扩展，可以每个库单独一个文件：

xxxxxxxxxx
19
1
// types/mui-theme.d.ts
2
import '@mui/material/styles';
3
​
4
declare module '@mui/material/styles' {
5
  interface Theme {
6
    customColor: string;
7
  }
8
  interface ThemeOptions {
9
    customColor?: string;
10
  }
11
}
12
// types/axios.d.ts
13
import 'axios';
14
​
15
declare module 'axios' {
16
  interface AxiosRequestConfig {
17
    retryCount?: number;
18
  }
19
}

这样每个模块都独立声明、自动合并，不会冲突。

---

✅ 方式 3：为全局声明定义独立命名空间

如果必须写全局类型（如全局变量、工具函数），建议用命名空间隔离：

xxxxxxxxxx
9
1
// types/global-utils.d.ts
2
declare namespace AppUtils {
3
  function formatDate(date: Date): string;
4
  interface ApiResponse<T> {
5
    code: number;
6
    data: T;
7
    msg: string;
8
  }
9
}

使用时：

xxxxxxxxxx
1
1
const data: AppUtils.ApiResponse<User> = ...

这样不会污染全局命名空间。

---

🧠 三、多人协作时的规范建议

问题	解决方案
不同人改同一文件	拆分到独立的模块 .d.ts 文件
命名重复	统一命名空间或类型前缀，例如 UserInfo, UserApiResponse
类型引用混乱	建立统一的 types/index.ts 导出入口
版本不一致	在 PR 审查阶段严格检查类型变更影响
类型测试	使用 tsd 或 vitest + expectTypeOf 做类型测试

---

📦 四、tsconfig.json 配置示例

xxxxxxxxxx
11
1
{
2
  "compilerOptions": {
3
    "baseUrl": ".",
4
    "paths": {
5
      "@types/*": ["src/types/*"]
6
    },
7
    "typeRoots": ["src/types", "node_modules/@types"],
8
    "strict": true
9
  },
10
  "include": ["src", "src/types"]
11
}

---

✅ 小结

做法	说明
按功能模块拆分 .d.ts	最基础、最有效的防冲突方式
使用 declare module 扩展三方类型	自动声明合并，安全
使用命名空间隔离全局类型	避免污染
建立统一 types/index.ts 出口	便于统一管理和导入
tsconfig 明确 typeRoots 路径	确保编译器能识别

为已有JS文件提供类型声明，这个很简单，就是使用declare关键字来将类型声明一下，然后使用es6提供的模块化方案来导出定义好的类型，最后在文件里面引入并使用即可。

类型扩展

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

🧩 一、类型扩展的几种主要方式

✅ 1. 使用 extends 继承接口

xxxxxxxxxx
14
1
interface Person {
2
  name: string;
3
  age: number;
4
}
5
​
6
interface Employee extends Person {
7
  employeeId: string;
8
}
9
​
10
const e: Employee = {
11
  name: "Tom",
12
  age: 25,
13
  employeeId: "A123"
14
};

✅ extends 类似于「面向对象的继承」： 子接口拥有父接口的所有属性，并可以新增自己的。

✅ 2. 使用交叉类型 & 合并

xxxxxxxxxx
11
1
type Person = { name: string; age: number; };
2
type Contact = { email: string; phone: string; };
3
​
4
type PersonWithContact = Person & Contact;
5
​
6
const user: PersonWithContact = {
7
  name: "Alice",
8
  age: 30,
9
  email: "a@example.com",
10
  phone: "123456"
11
};

💡 & 的效果类似“交集”，结果类型需要同时满足左右两边的结构。 常用于“组合多个类型”或“给库类型补充属性”。

✅ 3. 扩展第三方库类型（声明合并）

🔥 这是在实际项目里非常常见的一种「类型扩展」。

xxxxxxxxxx
11
1
// 文件：types/mui-theme.d.ts
2
import "@mui/material/styles";
3
​
4
declare module "@mui/material/styles" {
5
  interface Theme {
6
    customColor: string;
7
  }
8
  interface ThemeOptions {
9
    customColor?: string;
10
  }
11
}

然后在组件中：

xxxxxxxxxx
4
1
import { useTheme } from "@mui/material/styles";
2
​
3
const theme = useTheme();
4
console.log(theme.customColor);

⚙️ TypeScript 会自动“合并”同名 declare module 的接口声明。

✅ 4. 扩展全局类型（declare global）

xxxxxxxxxx
8
1
// types/global.d.ts
2
export {};
3
​
4
declare global {
5
  interface Window {
6
    myAppVersion: string;
7
  }
8
}

这样在代码中你可以直接使用：

xxxxxxxxxx
1
1
console.log(window.myAppVersion);

💡 declare global 适合扩展环境对象（Window, NodeJS.ProcessEnv 等）。

✅ 5. 泛型约束中的扩展

xxxxxxxxxx
6
1
function getName<T extends { name: string }>(obj: T) {
2
  return obj.name;
3
}
4
​
5
getName({ name: "Bob", age: 20 }); // OK
6
getName({ age: 20 });              // ❌ 缺少 name

这里的 extends 表示“T 必须至少包含 name”。

✅ 6. Utility 类型中的扩展技巧

有时我们还会通过工具类型进行“选择性扩展”：

xxxxxxxxxx
9
1
interface User {
2
  id: number;
3
  name: string;
4
  email: string;
5
  age: number;
6
}
7
​
8
// 从 User 中选取部分字段再扩展
9
type UserPreview = Pick<User, "id" | "name"> & { active: boolean };

🧠 二、扩展 vs 合并 的区别

🧩 三、MUI 类型扩展示例（实际项目中的用法）

假设你想给 MUI Theme 增加一个 status 颜色：

xxxxxxxxxx
15
1
// types/mui-theme.d.ts
2
import '@mui/material/styles';
3
​
4
declare module '@mui/material/styles' {
5
  interface Theme {
6
    status: {
7
      danger: string;
8
    };
9
  }
10
  interface ThemeOptions {
11
    status?: {
12
      danger?: string;
13
    };
14
  }
15
}

在主题定义里：

xxxxxxxxxx
5
1
const theme = createTheme({
2
  status: {
3
    danger: "#e53e3e"
4
  }
5
});

现在 TS 就能识别 theme.status.danger 的类型了 ✅。

🧩 四、实践建议

2-14 类型别名 和 交叉类型

类型别名 Type Aliases

https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases

类型别名，就是给类型起一个别名，让它可以更方便的被重用。使用 type 关键字。

xxxxxxxxxx
25
1
let sum: (x: number, y: number) => number
2
/* 上面是定义接口的简写，完整写法如下：
3
interface ISum{
4
    (x:number,y:number): number
5
}
6
let sum: ISum
7
*/
8
​
9
const result = sum(1,2)
10
​
11
​
12
type PlusType = (x: number, y: number) => number
13
let sum2: PlusType = (x, y) => {
14
    return x +y;
15
}
16
​
17
// 支持联合类型
18
type StrOrNumber = string | number
19
let result2: StrOrNumber = '123'
20
result2 = 123
21
​
22
// 字符串字面量，然后赋值操作的时候，变量值只能在字面量里面选择，不能赋别的值。
23
// 这个看上去和枚举很像，能不能用枚举来做呢？我试过了，不能，那枚举到底有什么作用呢？它到底是一种类型还是什么呢？
24
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
25
let toWhere: Directions = 'Up'

这样就产生了一个疑问：type和interface的区别是什么？哪里应该用type，哪里应该用interface？

参考：https://zhuanlan.zhihu.com/p/351213183#:~:text=Typescript%20%E4%B8%AD%20type%20%E5%92%8C%20interface%20%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F%20Almost%20all,which%20is%20always%20extendable.%20%E6%84%8F%E6%80%9D%E5%B0%B1%E6%98%AF%E8%AF%B4%E5%87%A0%E4%B9%8E%E6%89%80%E6%9C%89%E6%8E%A5%E5%8F%A3%E7%9A%84%E5%8A%9F%E8%83%BD%E9%83%BD%E5%8F%AF%E4%BB%A5%E5%9C%A8%E7%B1%BB%E5%9E%8B%E4%B8%AD%E4%BD%BF%E7%94%A8%EF%BC%8C%E4%B8%BB%E8%A6%81%E5%8C%BA%E5%88%AB%E5%9C%A8%E4%BA%8E%EF%BC%9A%20%E6%8E%A5%E5%8F%A3%E6%98%AF%E9%80%9A%E8%BF%87%E7%BB%A7%E6%89%BF%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9D%A5%E6%89%A9%E5%B1%95%EF%BC%8C%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D%E6%98%AF%E9%80%9A%E8%BF%87%20%26%20%E6%9D%A5%E6%89%A9%E5%B1%95%E3%80%82

先搞简单点：

Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

主要区别是：

• 接口是通过继承（extends）的方式来扩展，类型别名是通过 & 来扩展。
• 同名接口可以自动合并，而类型别名不行（会报错）

 

上面的“接口通过继承的方式来扩展”，在interface这一节中并没有专门讲，但是通过泛型与接口已经讲到了，那么能不能定义一个接口，里面使用interface的extends来扩展呢？

可以这样写：

要结合泛型一起使用才行：

交叉类型 Intersection Types

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

交叉类型将多种类型组合为一种。这使您可以将现有类型加在一起，以获得具有所需所有功能的单个类型。

xxxxxxxxxx
6
1
interface IName  {
2
  name: string
3
}
4
​
5
type IPerson = IName & { age: number }
6
let person: IPerson = { name: 'hello', age: 12}

2-15 内置类型

内置类型

操作DOM和BOM时，一定要为变量定义类型，不然定义的事件都不能使用。也不要太担心，应该会有代码提示的，如果没有代码提示，可以console.dir(变量名)，来查看这个变量是什么类型。

xxxxxxxxxx
18
1
const a: Array<number> = [1,2,3]
2
// 大家可以看到这个类型，不同的文件中有多处定义，但是它们都是 内部定义的一部分，然后根据不同的版本或者功能合并在了一起，一个interface 或者 类多次定义会合并在一起。这些文件一般都是以 lib 开头，以 d.ts 结尾，告诉大家，我是一个内置对象类型
3
const date: Date = new Date()
4
const reg = /abc/
5
// 我们还可以使用一些 build in object，内置对象，比如 Math 与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。
6
​
7
Math.pow(2,2)
8
​
9
// DOM 和 BOM 标准对象
10
// document 对象，返回的是一个 HTMLElement
11
let body: HTMLElement = document.body
12
// document 上面的query 方法，返回的是一个 nodeList 类型
13
let allLis = document.querySelectorAll('li')
14
​
15
//当然添加事件也是很重要的一部分，document 上面有 addEventListener 方法，注意这个回调函数，因为类型推断，这里面的 e 事件对象也自动获得了类型，这里是个 mouseEvent 类型，因为点击是一个鼠标事件，现在我们可以方便的使用 e 上面的方法和属性。
16
document.addEventListener('click', (e) => {
17
  e.preventDefault()
18
})

Utility Types

Typescript 还提供了一些功能性，帮助性的类型，这些类型，大家在 js 的世界是看不到的，这些类型叫做 utility types，提供一些简洁明快而且非常方便的功能。

xxxxxxxxxx
16
1
// partial，它可以把传入的类型都变成可选
2
interface IPerson {
3
  name: string
4
  age: number
5
}
6
​
7
let viking: IPerson = { name: 'viking', age: 20 }
8
​
9
type IPartial = Partial<IPerson>
10
let viking2: IPartial = { }
11
​
12
​
13
// Omit，它返回的类型可以忽略传入类型的某个属性，这个在使用类型时应该用得到，如果你想忽略某些属性的话。
14
​
15
type IOmit = Omit<IPerson, 'name'>
16
let viking3: IOmit = { age: 20 }

TS独特关键字

🧩 一、类型系统相关关键字

🧩 一、satisfies — “类型符合检查”（TS 4.9+）

✅ 用途

satisfies 用来验证某个值是否满足指定类型约束，但 不会改变 该值的推断类型。 这比 as 更安全（as 是强制断言，satisfies 是类型验证）。

---

✅ 示例 1：验证对象是否满足接口要求

xxxxxxxxxx
14
1
type ApiConfig = {
2
url: string;
3
method: 'GET' | 'POST';
4
};
5
​
6
const config = {
7
url: '/api/user',
8
method: 'GET',
9
headers: { Authorization: 'Bearer token' },
10
} satisfies ApiConfig;
11
​
12
// ✅ 编译通过，因为 config 满足 ApiConfig
13
// ✅ 推断类型仍保留 headers 属性
14
console.log(config.headers.Authorization);

✅ satisfies 不会把 config 的类型缩窄成 ApiConfig， 仍然保留了额外属性（如 headers），仅验证其“满足”接口要求。

---

⚠️ 对比 as

xxxxxxxxxx
8
1
const config2 = {
2
  url: '/api/user',
3
  method: 'GET',
4
  headers: { Authorization: 'Bearer token' },
5
} as ApiConfig;
6
​
7
// ⚠️ 此时 headers 丢失了类型信息
8
// config2.headers.Authorization ❌ 报错：Property 'headers' does not exist

---

✅ 示例 2：校验文字类型而不丢失推断

xxxxxxxxxx
11
1
type Theme = {
2
  color: 'light' | 'dark';
3
  fontSize: number;
4
};
5
​
6
const theme = {
7
  color: 'dark',
8
  fontSize: 14,
9
} satisfies Theme;
10
​
11
// theme.color 推断为 "dark"（字面量），而不是 string

✅ satisfies 在这里让 TypeScript 保留了字面量类型 "dark"， 而不是自动放宽为 string，这有助于类型安全。

---

🧮 二、in — “映射类型”或“属性遍历”

✅ 用途

**in** 用在类型定义里，表示遍历联合类型的每个成员。 通常与索引签名结合，构造新类型。

---

✅ 示例 1：从键集合生成类型

xxxxxxxxxx
12
1
type Keys = 'id' | 'name' | 'email';
2
​
3
type User = {
4
  [K in Keys]: string;
5
};
6
​
7
// 等价于：
8
// type User = {
9
//   id: string;
10
//   name: string;
11
//   email: string;
12
// }

---

✅ 示例 2：生成布尔标志类型

xxxxxxxxxx
7
1
type Permissions = 'read' | 'write' | 'execute';
2
​
3
type PermissionFlags = {
4
  [P in Permissions]: boolean;
5
};
6
​
7
// => { read: boolean; write: boolean; execute: boolean }

---

✅ 示例 3：条件映射 + in

xxxxxxxxxx
11
1
type Nullable<T> = {
2
  [K in keyof T]: T[K] | null;
3
};
4
​
5
interface Person {
6
  name: string;
7
  age: number;
8
}
9
​
10
type NullablePerson = Nullable<Person>;
11
// => { name: string | null; age: number | null }

---

✅ 示例 4：in 也能用于循环（运行时）

⚠️ 注意：这里的 in 是 JS 层面的，不同于上面的类型用法。

xxxxxxxxxx
4
1
const user = { id: 1, name: 'Tom' };
2
for (const key in user) {
3
  console.log(key, user[key as keyof typeof user]);
4
}

---

✅ 总结对比表

关键字	作用层面	用途	是否影响推断类型
satisfies	类型检查阶段	检查值是否满足某个类型，但不改变类型推断	❌ 不会改变
in	类型定义（映射类型）	遍历联合类型的成员生成结构化类型	✅ 会生成新类型结构

🧠 二、TypeScript 专属关键字的核心逻辑

🧩 三、综合示例（多个关键字结合）

xxxxxxxxxx
35
1
// 定义接口和类型别名
2
interface User {
3
  readonly id: number;
4
  name: string;
5
}
6
​
7
type ApiResponse<T> = {
8
  data: T;
9
  error?: string;
10
};
11
​
12
// 泛型 + 约束 + infer + keyof
13
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
14
  return obj[key];
15
}
16
​
17
const user: User = { id: 1, name: "Alice" };
18
const userName = getProperty(user, "name"); // string
19
​
20
// 条件类型 + infer
21
type PromiseValue<T> = T extends Promise<infer U> ? U : T;
22
type A = PromiseValue<Promise<number>>; // number
23
​
24
// 自定义类型守卫
25
function isNumber(x: unknown): x is number {
26
  return typeof x === "number";
27
}
28
​
29
// satisfies + typeof
30
const config = {
31
  url: "/api",
32
  method: "GET",
33
} satisfies { url: string; method: "GET" | "POST" };
34
​
35
console.log(config.url);

TS独特符号

🧩 一、先说结论

✅ TypeScript 是 JavaScript 的超集， 所以它 包含了全部 JS 的符号， 并且 额外增加了一些类型系统专用符号（如 :, ?, |, &, as, !, <> 等）。

换句话说：

• 运行时符号（如 +, -, ===） → 和 JS 完全一致
• 类型系统符号（如 :, ?, |, &, as） → 是 TS 独有或增强的

🧱 二、JavaScript 中的符号（TS 同样支持）

这些是 TypeScript 完全继承的符号。 TS 对这些符号的 运行时语义 与 JS 完全一致。

🧩 三、TypeScript 新增或扩展的符号（类型系统部分）

🧮 四、举例说明关键区别

1️⃣ : —— 类型注解

xxxxxxxxxx
4
1
let name: string = 'Tom';
2
function sum(a: number, b: number): number {
3
  return a + b;
4
}

JS 中 : 没有此语法。

2️⃣ | & & —— 联合与交叉类型

xxxxxxxxxx
2
1
type ID = string | number;
2
type User = { name: string } & { age: number };

JS 中 | 与 & 仅用于位运算， TS 中用于类型组合。

3️⃣ as —— 类型断言

xxxxxxxxxx
1
1
const el = document.getElementById('btn') as HTMLButtonElement;

JS 没有类型系统，所以 as 无意义。

4️⃣ ! —— 非空断言

xxxxxxxxxx
3
1
function greet(name?: string) {
2
  console.log(name!.toUpperCase());
3
}

告诉编译器 “我确定这里不是 null/undefined”。 JS 仅有逻辑非 !，语义不同。

5️⃣ <T> —— 泛型声明

xxxxxxxxxx
3
1
function identity<T>(arg: T): T {
2
  return arg;
3
}

JS 中 < > 仅用于比较运算。 TS 中 <T> 表示类型参数。

6️⃣ keyof / in / extends

xxxxxxxxxx
3
1
type Person = { name: string; age: number };
2
type Keys = keyof Person; // 'name' | 'age'
3
type ReadonlyPerson = { [K in keyof Person]: Readonly<Person[K]> };

这些符号仅存在于 TS 类型层级中。

7️⃣ satisfies

xxxxxxxxxx
2
1
type Config = { url: string; method: 'GET' | 'POST' };
2
const cfg = { url: '/api', method: 'GET' } satisfies Config;

JS 无法进行这种类型验证。

🧠 五、总结对比表

小结：

学了第二章的内容，发现TS为各种数据类型做了约束，这不就是C或JAVA语言里面的规范，怎么又加进来了吗？

TS中规定了很多类型，好处就是在我写ts代码的时候，必须按照定义的类型来写，不然在编写代码的时候就会报错，就是在写代码的时候就告诉我，这个地方要注意。

这在写别的代码的时候都没有的情况，别的代码写出来之后，最多检查一下语法规范什么的，不会对类型这方面的东西给出提示，但是ts中开启了监视功能之后，很快就能给出提示。不会出现一种数据类型使用另外一种数据类型方法的错误，而JS只有在执行之后才能告诉我这种错误。保持了代码的一致性，避免JS那种找不到错误的情况。